<template>
  <el-menu
      class="top_menu"
      mode="horizontal"
      @select="handlSelect"
      active-text-color="#4B89DA"
      text-color="#00144b"
      background-color="#fff"
      router
  >
    <div class="flex-grow"/>

    <div class="bt_login_out_align_right">
      <button class="c-button c-button--gooey" @click="finish"
              style="position:relative;left: 62%;margin-left: 410px;margin-top: 10px;width: 118px;height:38px"> 返 回
        <div class="c-button__blobs">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </button>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: block; height: 0; width: 0;">
        <defs>
          <filter id="goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
                           result="goo"></feColorMatrix>
            <feBlend in="SourceGraphic" in2="goo"></feBlend>
          </filter>
        </defs>
      </svg>
    </div>


    <img src="@/assets/topLogo.jpg" class="top-logo" style="visibility: hidden"/>

  </el-menu>
</template>

<script>
export default {
  name: "blank-top-menu",
  methods: {
    finish() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.flex-grow {
  flex-grow: 0.5;
}

.top_menu {
  padding: 0;
  margin: 0;
  height: 100%;
  font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
  font-weight: bolder;
  font-size: large;
}

.top-logo {
  position: relative;
  left: 30.4%;
  top: 13.8%;
  border-radius: 10px;
  width: 40px;
  height: 40px
}

/*登录按钮样式 TODO*/
.bt_login_out_align_right {
  position: relative;
}

.c-button {
  color: #000;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  padding: 0.3em 1.0em;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 1;
}

.c-button--gooey {
  color: #703CF6;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: 4px solid #703CF6;
  border-radius: 0;
  position: relative;
  transition: all 700ms ease;
}

.c-button--gooey .c-button__blobs {
  height: 100%;
  /*filter: url(#goo);*/
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: -3px;
  right: -1px;
  z-index: -1;
}

.c-button--gooey .c-button__blobs div {
  background-color: #703CF6;
  width: 34%;
  height: 100%;
  border-radius: 100%;
  position: absolute;
  transform: scale(1.4) translateY(125%) translateZ(0);
  transition: all 700ms ease;
}

.c-button--gooey .c-button__blobs div:nth-child(1) {
  left: -5%;
}

.c-button--gooey .c-button__blobs div:nth-child(2) {
  left: 30%;
  transition-delay: 60ms;
}

.c-button--gooey .c-button__blobs div:nth-child(3) {
  left: 66%;
  transition-delay: 25ms;
}

.c-button--gooey:hover {
  color: #fff;
}

.c-button--gooey:hover .c-button__blobs div {
  transform: scale(1.4) translateY(0) translateZ(0);
}

</style>
